{extend name="common/dialog" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/common/css/jquery-ui.css" media="all">
<script type="text/javascript" src="__STATIC__/common/js/jquery-ui.js"></script>
<style type="text/css">
    @media screen and (min-width: 768px){
      .layui-container {
          width: 95%;
      }
    }
    .body-back{background-color: #fff;}
    .alip-cloud,.cloud-aws,.cloud-alip,.aws-cloud{display: none;}
    .benduan{}
    .mradio-group{max-height: 400px;overflow-y: auto;}
    .mradio-group li{padding:5px 10px;position: relative;border:1px solid #ccc; border-radius: 4px; margin: 5px 0;width: 93%;}
    .mradio-group li ._radio,.mradio-group li .layui-form-radio{position: absolute;top: 6px;right: -15px;}
    .bottom-btnview{position: fixed;bottom:40px;right: 20px;font-size: 16px;}
    .bottom-priceview{position: fixed;bottom:10px;right: 20px;font-size: 14px;}
    .bottom-priceview #price-money{font-size: 16px;}
</style>
<!--联动参数-->
<script type="text/javascript">
   
</script>
{/block}
{block name="main"}
<div class="layui-container" style="padding: 0;">
  <!--head btn-->
    <div class="layui-btn-group tab-btn tab-view-btns" style="float: right;">
      <button class="layui-btn tab-active" data-id="#view-tab-1" id="_view-tab-1">{:lang('Basic Information')}</button>
      <button class="layui-btn" data-id="#view-tab-2" id="_view-tab-2">{:lang('Local Access')}</button>
      <button class="layui-btn" data-id="#view-tab-3" id="_view-tab-3">{:lang('End-to-end access')}</button>
       <button class="layui-btn layui-btn-warm" data-id="#view-tab-4" id="tab-4">{:lang('Line Lists')}</button>
  </div>
  <div style="clear:both;height:30px;"></div>
  <!--head btn end-->
  <!--content start-->
  <div class="view-content" style="margin:15px 0;">
    <!--基本信息-->
    <div class="view-tab" id="view-tab-1">
    <form class="layui-form nerwork-like" id="_form1">
        <input type="hidden" name="is_sn" value="0">
        <input type="hidden" name="cart_id" id="_cart_id" value="{$cart_id}">
        <div class="layui-col-xs6" style="padding-right: 25px;">
            <div class="form-item">
              <div class="form-label">* {:lang('Line Name')}</div>
              <div class="form-value">
                <input type="text" name="name" lay-verify="required"  placeholder="{:lang('Please Enter The Name')}" >
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">* {:lang('Bandwidth')} <span style="float: right;">MAX：2000 Mbps</span></div>
              <div class="form-value broadbandinput" >
                <label class="broadband-label">
                      <input type="text" id="_broadband" value="" name="broadband" value="" lay-verify="required" data-title="{:lang('Please enter broadband values')}"  placeholder="0" >
                      <span class="autobtn"></span>
                      <span class="_add"></span>
                      <span class="_min"></span>
                  </label> 
                
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">* {:lang('Purchase Time')}</div>
              <div class="form-value">
                 <select name="daylength"  lay-filter="_daylength" lay-verify="required" id="daylength">
                     <option value="">{:lang('Please Choose')}</option>
                     <?php foreach($daLength as $dindex=>$d):?>
                      <option value="{$dindex}">{$d}</option>
                      <?php endforeach;?>
                  </select>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"> {:lang('Planned opening time')}</div>
              <div class="form-value">
                 <input type="text" id="plan_time" class="datetime-icon" readonly="" name="plan_time" placeholder="" >
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"> {:lang('Remarks')}</div>
              <div class="form-value">
                 <textarea placeholder="{:lang('Please enter content')}" id="_create_remarks" name="remarks"  style="width:99%;height: 40px;"></textarea>
              </div>
            </div>
            
        </div>
        <div class="layui-col-xs6" style="padding-left: 25px;">
        </div>
        <div class="bottom-btnview">
          <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="submit1">{:lang('_Next')} <i class="icon icon-arrow-right2"></i></button>
        </div>
    </form>
    </div>
    <!--基本信息 end-->
    <!--本端配置-->
    <div class="view-tab" id="view-tab-2" style="display: none;">
      <form class="layui-form nerwork-like" id="_form2">
          <div class="layui-col-xs6" style="padding-right: 25px;">
              
              <div class="form-item">
                <div class="form-label"></div>
                <div class="form-value">
                   <select name="type" lay-filter="_type" data-title="{:lang('Please Select Type')}" lay-verify="required">
                    <option value="">{:lang('Please Select Type')}</option>
                    <?php foreach($types as $index=>$type):?>
                        <option value="{$index}">{$type}</option>
                    <?php endforeach;?>
                  </select>
                </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单-->
              <div class="type type-company">
                  <div class="form-item">
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                      <select name="country_id" lay-filter="countryId" data-value="0"  class="type-datacenter" data-aid="#city_id">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($popArr as $pop):?>
                          <option value="{$pop['id']}" data-icon="{:empty($pop['icon']) ? '' : $pop['icon']}"> {$pop['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      <select name="city_id" data-value="0" data-pid="0" class="type-datacenter" data-aid="#pop_id" id="city_id" lay-filter="cityId">
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('POP')}</div>
                    <div class="form-value">
                       <select name="pop_id" id="pop_id" class="type-datacenter" lay-filter="popId"></select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label"> {:lang('End Access Address')}</div>
                    <div class="form-value">
                       <input type="text" name="access_addr" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                    </div>
                  </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单 end-->
              <!--公有云-->
              <div class="type type-publc">
                  <div class="form-item">
                    <div class="form-label">* {:lang('Gong Youyun')}</div>
                    <div class="form-value">
                       <select name="local_cloud_id" data-aid="#localcloudaddrid" class="type-publcc" lay-filter="localcloudid">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($clouds as $cloud):?>
                          <option value="{$cloud['id']}" data-icon="{:empty($cloud['icon']) ? '' : $cloud['icon']}" >{$cloud['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                          <select name="cloud_country"  class="type-publcc" id="localcloudaddrid"  lay-filter="localcloudaddrid" data-aid="#cloud_city" >
                            <option value="">{:lang('Local Cloud Connection Area')}</option>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                     <select name="cloud_city" class="type-publcc" id="cloud_city"  data-aid="#cloud_conter" lay-filter="cloudCity">
                            <option value="">{:lang('Local Access City')}</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('Cloud Data Center')}</div>
                    <div class="form-value">
                       <select name="cloud_conter" class="type-publcc" id="cloud_conter">
                            <option value="">{:lang('Please Choose')}</option>
                        </select>
                    </div>
                  </div>
                  <!--阿里云&腾讯云 end-->
                  <div class="form-item" id="a-account">
                    <div class="form-label">* {:lang('Account ID')}</div>
                    <div class="form-value">
                      <input type="text" name="local_cloud_userid"  placeholder="{:lang('Please enter the account ID')}" class="layui-input type-publcc">
                    </div>
                  </div>
                  <div class="form-item a_cloud_hide" style="display: none;">
                    <div class="form-label">* <label id="account_label1">{:lang('auth key')}</label></div>
                    <div class="form-value">
                      <input type="text" name="AauthKey"  placeholder="" class="layui-input" >
                    </div>
                  </div>
                 
              </div>
              <!--公有云 end-->
              <div class="form-item">
                <div class="form-label">* {:lang('End Network')}</div>
                <div class="form-value">
                   <input type="text" name="local_network" lay-verify="required" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                </div>
              </div>
          </div>
          <div class="layui-col-xs6" style="padding-left: 25px;">
              <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
              <div id='cloud-huawei1' style="display: none;">
                  <div class="form-item">
                      <div class="form-label">* {:lang('Order ON.')}</div>
                      <div class="form-value">
                         <input type="text" name="orderId1" placeholder="{:lang('Please input order number.')}" class="layui-input huawei-input">
                      </div>
                  </div>
                    <div class="form-item">
                        <div class="form-label">* {:lang('VPC ID')}</div>
                        <div class="form-value">
                            <input type="text" name="VPCID1" placeholder="{:lang('Please input VPC ID')}" class="layui-input huawei-input">
                        </div>
                  </div>
                  <div class="form-item">
                      <div class="form-label">* {:lang('VPC available area')}</div>
                      <div class="form-value">
                        <input type="text" name="VPC1" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input huawei-input">
                      </div>
                  </div>
              </div>
          </div>
          <div class="bottom-btnview">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary _prex-btn" data-aid="#view-tab-1"><i class="icon icon-arrow-left2"></i>{:lang('_Back')} </button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="submit2">{:lang('_Next')} <i class="icon icon-arrow-right2"></i></button>
          </div>
      </form>
    </div>
    <!--本端配置 end-->
    <!--对端接入-->
    <div class="view-tab" id="view-tab-3" style="display: none;">
      <form class="layui-form nerwork-like" id="_form3">
          <div class="layui-col-xs6" style="padding-right: 25px;">
              
              <div class="form-item">
                <div class="form-label"></div>
                <div class="form-value">
                   <select name="endtype" lay-filter="endtype" data-title="{:lang('Please Select Type')}" lay-verify="required">
                    <option value="">{:lang('Please Select Type')}</option>
                    <?php foreach($types as $index=>$type):?>
                        <option value="{$index}">{$type}</option>
                    <?php endforeach;?>
                  </select>
                </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单-->
              <div class="etype etype-company" style="display: none;">
                  <div class="form-item" >
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                      <select name="ecountry_id" lay-filter="ecountryId" class="etype-datacenter" data-aid="#ecity_id">
                          <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($popArr as $pop):?>
                        <option value="{$pop['id']}" data-icon="{:empty($pop['icon']) ? '' : $pop['icon']}">{$pop['name']}</option>
                        <?php endforeach;?>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      
                      <select name="ecity_id" data-pid="0" class="etype-datacenter" data-aid="#epop_id" id="ecity_id" lay-filter="ecityId">
                        </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('POP')}</div>
                    <div class="form-value">
                       
                        <select name="epop_id" id="epop_id" lay-filter="epopId" class="etype-datacenter" > </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('End to end access address')}</div>
                    <div class="form-value">
                      <input type="text" name="eaccess_addr" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                    </div>
                  </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单 end-->
              <!--公有云-->
              <div class="etype etype-publc" style="display: none;">
                  <div class="form-item">
                    <div class="form-label">* {:lang('Opposite end Gong Youyun')}</div>
                    <div class="form-value">
                    
                          <select name="endcloudid" data-aid="#endcloudaddrid" lay-filter="endcloudid" class="etype-publcc">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($clouds as $cloud):?>
                          <option value="{$cloud['id']}" data-icon="{:empty($cloud['icon']) ? '' : $cloud['icon']}" >{$cloud['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                  </div>
                  <div class="form-item" >
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                          <select name="endcloudaddrid"  id="endcloudaddrid" class="etype-publcc" lay-filter="endCloudaddrid" data-aid="#ecloud_city">
                              <option value="">{:lang('Please Choose')}</option>
                            </select>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      <select name="ecloud_city" class="etype-publcc" id="ecloud_city" data-aid="#ecloud_conter" lay-filter="ecloudCity">
                        <option value="">{:lang('Please Choose')}</option>
                        
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('Cloud Data Center')}</div>
                    <div class="form-value" >
                       <select name="ecloud_conter" class="etype-publcc" id="ecloud_conter">
                        <option value="">{:lang('Please Choose')}</option>
                      </select>
                    </div>
                  </div>
                  <!--阿里云&腾讯云 end-->
                  <div class="form-item" id="z-account">
                    <div class="form-label">* {:lang('Account ID')}</div>
                    <div class="form-value">
                      <input type="text" name="end_userid" placeholder="{:lang('Please enter the account ID')}" class="layui-input etype-publcc">
                    </div>
                  </div>
                  
                 <div class="form-item z_cloud_hide" style="display: none;">
                    <div class="form-label">* <label id="account_label2">{:lang('auth key')}</label></div>
                    <div class="form-value">
                      <input type="text" name="ZauthKey"  placeholder="" class="layui-input etype-publcc">
                    </div>
                  </div>
              </div>
              <!--公有云 end-->
              <div class="form-item">
                <div class="form-label">* {:lang('End-to-end Network')}</div>
                <div class="form-value">
                   <input type="text" name="end_network"  lay-verify="required" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                </div>
              </div>
          </div>
          <div class="layui-col-xs6" style="padding-left: 25px;">
              <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
              <div id='cloud-huawei2' style="display: none;">
                  <div class="form-item">
                      <div class="form-label">* {:lang('Order ON.')}</div>
                      <div class="form-value">
                         <input type="text" name="orderId2" placeholder="{:lang('Please input order number.')}" class="layui-input huawei-input2">
                      </div>
                  </div>
                    <div class="form-item">
                        <div class="form-label">* {:lang('VPC ID')}</div>
                        <div class="form-value">
                            <input type="text" name="VPCID2" placeholder="{:lang('Please input VPC ID')}" class="layui-input huawei-input2">
                        </div>
                  </div>
                  <div class="form-item">
                      <div class="form-label">* {:lang('VPC available area')}</div>
                      <div class="form-value">
                        <input type="text" name="VPC2" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input huawei-input2">
                      </div>
                  </div>
              </div>
          </div>
          <div class="bottom-btnview">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary _prex-btn" data-aid="#view-tab-2"><i class="icon icon-arrow-left2"></i>{:lang('_Back')}</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="submit3">{:lang('Save')}</button>
          </div>
      </form>
    </div>
    <!--对端接入 end-->
    <!--购物车-->
     <div class="view-tab" id="view-tab-4" style="display: none;">
        <table class="mylayui-table">
          <tr>
            <th>{:lang('Line Name')}</th>
            <th>{:lang('Local Access')}</th>
            <th>{:lang('Peer Access')}</th>
            <th>{:lang('broadband')}</th>
            <th>{:lang('Purchase Time')}</th>
            <th>{:lang('Delete')}</th>
          </tr> 
          <tbody id="_lists">
          <?php if($carts):?>
          <?php foreach($carts as $cat):?>
              <tr>
                  <td>{$cat['name']}</td>
                  <td>{$cat['typelabel']}</td>
                  <td>{$cat['endlabel']}</td>
                  <td>{$cat['broadband']} (MB)</td>
                  <td>{$cat['daLength']}</td>
                  <td style="width:150px;">
                      <a data-href="{:U('cart/delete')}?_id={$cat['_id']}" href="#" class=" _delete">{:lang('Delete')}</a> | 
                      <a data-href="{:U('cart/getData')}?_id={$cat['_id']}" id="_edit-{$cat['_id']}" href="{:U('create')}?cart_id={$cat['_id']}" class=" _edit " data-aid="{$cat['_id']}">{:lang('edit')}</a>
                  </td>
              </tr>
          <?php endforeach;?>
          <?php else:?>
           <tr id="not-list"><td colspan="7" align="center" style="text-align: center;">{:lang('Not Data...')}</td></tr>
           <?php endif;?>
          </tbody>
        </table>
        <div class="bottom-btnview">
            <a type="button" class="layui-btn layui-btn-sm layui-btn-normal" data-value='1' href="{:url('create')}">{:lang('_add')}</a>
            <?php if($carts):?>
              <button type="button" class="layui-btn layui-btn-sm" id="_confirm" data-href="{:U('cart/confirm')}">{:lang('Submit')}</button>
            <?php else:?>
              <button type="button" class="layui-btn layui-btn-sm layui-btn-disabled" id="_confirm" >{:lang('Submit')}</button>
            <?php endif;?>
          </div>
     </div>
    <!--购物车 end-->
  </div>
  <div class="bottom-priceview">
    <div class="" id="price-money"></div>
  </div>
  <!--content start end-->
</div>
{/block}
{block name="footer"}
<script type="text/javascript" id="network-data">
    <tr>
        <td>{{_name_}}</td>
        <td>{{_tylelabel_}}</td>
        <td>{{_endlabel_}}</td>
        <td>{{_bandwidth_}} (MB)</td>
        <td>{{_daLength_}}</td>
        <td style="width:150px;">
            <button data-href="{:U('cart/delete')}?_id={{_id_}}" class="_delete">{:lang('Delete')}</button> | 
            <a data-href="{:U('cart/getData')}?_id={$cat['_id']}" id="_edit-{{_id_}}" href="{:U('create')}?cart_id={{_id_}}" class=" " data-aid="{{_id_}}">{:lang('edit')}</a>
        </td>
    </tr>
</script>
<script type="text/javascript" src="__STATIC__/admin/js/linkage.js"></script>
<script>
    var _item=1;
    var myDmoe = null;
    var isEdit = false;
    layui.use(['form', 'layer','laydate','upload'], function () {
        var form = layui.form, layer = layui.layer,$= layui.jquery,laydate = layui.laydate,upload = layui.upload;
        /*监听第一步，基本信息*/
        form.on("submit(submit1)",function(data){
           setTopTab('#view-tab-2');
        })
        /*监听第一步，基本信息*/
        form.on("submit(submit2)",function(data){

           setTopTab('#view-tab-3');
        })
        $("body").on('click',"#tab-4",function(){
            setTopTab('#view-tab-4');
        })
        /*时间切换*/
        form.on("select(_daylength)",function(obj){
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        $("body").on("click",'#_view-tab-1',function(){
          if(isEdit){
              setTopTab('#view-tab-1');
           }
        })
        $("body").on("click",'#_view-tab-2',function(){
           if(isEdit){
              setTopTab('#view-tab-2');
           }
           
        })
        $("body").on("click",'#_view-tab-3',function(){
            if(isEdit){
              setTopTab('#view-tab-3');
           }
        })
        $("#_broadband").blur(function(){
          var value = parseInt($(this).val());
            if(value < 0 || isNaN(value)){
              value=1;
            }else if(value > 1000){
               value = 1000
            }else if(value > 10 && value <= 1000){
               value = Math.round(value/10)*10
            }
            $(this).val(value);
            if($(this).hasClass('hasHction')){
              _alculator({
                  url:"{:U('query')}",
                  data:getFormParam(),
                  notice:"{:lang('The cost is being calculated....')}"
              })
              $(this).removeClass('hasHction');
            }
            
        })
        $("body").on("click","#_broadband",function(){
           $(this).addClass('hasHction');
        })
        /*移删数据*/
        $('#_lists').on("click","._delete",function(){
            var _this = $(this);
            var confirm = layer.confirm('{:lang("confirmed?")}', function(index){
                layer.close(confirm);
                loading =layer.load(1, {shade: [0.1,'#fff']});
                $.post(_this.data('href'),{},function (res) {
                    layer.close(loading);
                    if (res.code==1) {
                        _this.parents('tr').remove();
                        if($('#_lists').find('tr').length == 0){
                            $("#_confirm").addClass('layui-btn-disabled');
                            $('#_lists').html('<tr id="not-list"><td colspan="8" align="center" style="text-align:center" >{:lang('Not Data...')}</td></tr>');
                        }
                        _item--;
                    }else{
                        layer.msg(res.msg,{time:1000,icon:2});
                        return false;
                    }
                })
            })     
        })
        /*确认提交*/
        $("#_confirm").click(function(){
            var _this = $(this);
            if(_this.hasClass('layui-btn-disabled')){
                return false;
            }
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $("#_confirm").addClass('layui-btn-disabled');
            $.post(_this.data('href'),{},function (res) {
                layer.close(loading);   
                if (res.code==1) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        top.location.reload();
                    });
                }else{
                    $("#_confirm").removeClass('layui-btn-disabled');
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })
        })
        /*监听第一步，基本信息*/
        var isSubmit = false;
        form.on("submit(submit3)",function(data){
          if(isSubmit){
              return false;
          }
           var dataParam = getFormParam();
           loading = layer.load(1,{shade:[0.1,'#fff']});
           isSubmit = true;
           $.post("",dataParam,function(res){
                layer.close(loading);

                if (res.code > 0) {
                    var n = res.data;
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        //location.href = res.url;
                        var _datalist = $("#network-data").html();
                        _datalist = _datalist.replace("{{_name_}}",n.name);
                        _datalist = _datalist.replace("{{_tylelabel_}}",n.typelabel);
                         _datalist = _datalist.replace("{{_endlabel_}}",n.endlabel);
                        _datalist = _datalist.replace("{{_endarea_}}",n.endarea);
                        _datalist = _datalist.replace("{{_bandwidth_}}",n.broadband);
                        _datalist = _datalist.replace("{{_daLength_}}",n.daLength);
                        _datalist = _datalist.replace("{{_total_}}",n.currency+n.total);
                        _datalist = _datalist.replace("{{_id_}}",n._id);
                        _datalist = _datalist.replace("{{_id_}}",n._id);
                        _datalist = _datalist.replace("{{_id_}}",n._id);

                        $("#_lists").append(_datalist);
                        $("#_confirm").removeClass('layui-btn-disabled');
                        //resetForm();//重置表单
                        //setTopTab('#view-tab-4');
                        location.reload();
                        $("#not-list").hide();
                        if(myDmoe != null){
                            $(myDmoe).remove();
                        }
                    });
                } else {
                  isSubmit = false;
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
           })
        })
        /*监听上一步*/
        $("body").on('click','._prex-btn',function(){
            var _this = $(this);
            if(_this.data('value') == 1){
              resetForm();
              isEdit = false;
            }
            setTopTab(_this.data('aid'))
        })
        /*計劃開通時間*/
        laydate.render({
            elem: '#plan_time',
            lang: 'en',
            min:+1
        }); 
        /*绑定本端接入类型（公司机构、数据中心（私有云）、公有云）*/
        form.on("select(_type)",function(obj){
            if(obj.value == 3){  //公有云
               $(".type").hide(); 
               $(".type-publc").show(); 
               $(".type-publcc").attr('lay-verify',"required");
               $(".type-datacenter").removeAttr('lay-verify',"required");
            }else if(obj.value > 0){
                $(".type").hide();
                $(".type-company").show(); 
                $(".type-datacenter").attr('lay-verify',"required");
                $(".type-publcc").removeAttr('lay-verify',"required");
            }else{
                $(".type").hide(); 
            }
            form.render();
        })
        form.on("select(endtype)",function(obj){

            if(obj.value == 3){  //公有云
               $(".etype").hide(); 
               $(".etype-publc").show(); 
               $(".etype-publcc").attr('lay-verify',"required");
               $(".etype-datacenter").removeAttr('lay-verify',"required");
            }else if(obj.value > 0){
                $(".etype").hide();
                $(".etype-company").show(); 
                $(".etype-publcc").removeAttr('lay-verify',"required");
                $(".etype-datacenter").attr('lay-verify',"required");
            }else{
                $(".etype").hide(); 
            }
            form.render();
        })
        /*本端pop点切换*/
        form.on("select(countryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).attr('data-pid',obj.value);
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#pop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('pop/popList')}",{pid:obj.value},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('')
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
            })
        })
        /*pop点切换*/
        form.on("select(cityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('');
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected data-address='"+item.address+"'>"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
            })
        })
        form.on("select(popId)",function(obj){
            var _addres = $("#pop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='access_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*本端公有云（云列表）*/
        form.on("select(localcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            $("#localcloudaddrid,#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            if(obj.value > 0){
                loading =layer.load(1, {shade: [0.1,'#fff']});
                _post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    layer.close(loading);
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' >"+item.name+"</option")
                        })
                    }
                    form.render();
                })
            }
            setACloudUser(obj.value)
            
            form.render();
        })
        /*地区*/
        form.on("select(localcloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val()},function(res){
                layer.close(loading); 
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
            })
        })
        /*本端城市*/
        form.on("select(cloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val(),country_id:$("#localcloudaddrid").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                       
                    })
                    form.render();
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:getFormParam(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                
            })
        })
        /*对端公有云（云列表）*/
        form.on("select(endcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#endCloudaddrid,#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            if(obj.value > 0){
                
                loading =layer.load(1, {shade: [0.1,'#fff']});
                _post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    layer.close(loading);
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' selected >"+item.name+"</option")
                            }else{
                                $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' >"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                })
            }
            setZCloudUser(obj.value);
            form.render();
        })
        /*地区*/
        form.on("select(endCloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='endcloudid']").val()},function(res){
                layer.close(loading);
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
            })
        })

        /*对端城市*/
        form.on("select(ecloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='endcloudid']").val(),country_id:$("#endcloudaddrid").val()},function(res){
                layer.close(loading);
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:getFormParam(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                form.render();
            })
        })
        /*对端pop点接入*/
        form.on("select(ecountryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            $(doem).attr('data-pid',obj.value);
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#epop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('pop/popList')}",{pid:obj.value},function(res){
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
            })
        })
        /*pop点切换*/
        form.on("select(ecityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
            })
        })
        form.on("select(epopId)",function(obj){
            var _addres = $("#epop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='eaccess_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*编辑数据*/
          var cart_id = parseInt($("#_cart_id").val());
          if(isNaN(cart_id) == false && cart_id > 0){
              var _this = $("#_edit-"+cart_id);
              if(_this.hasClass('disabled')){
                  return false;
              }
              setTopTab('#view-tab-1');
              myDmoe = _this.parents('tr');
              _this.addClass('disabled')
              loading =layer.load(1, {shade: [0.1,'#fff']});
              $('#_cart_id').val(_this.data('aid'));
              _post(_this.data('href'),{},function(res){
                _this.removeClass('disabled') 
                layer.close(loading);
                if(res.code == 1){
                    var field = res.data;
                    $("input[name='name']").val(field.name);
                    setSelectedclick('type',field.type,true);
                    if(field.type == 3){  //公有云
                       setSelectedclick('local_cloud_id',field.local_cloud_id,false);
                        /*設置label*/
                        $("input[name='local_cloud_userid']").val(field.local_cloud_userid);
                        $("input[name='AauthKey']").val(field.AauthKey);
                        $("input[name='orderId1']").val(field.orderId1);
                        $("input[name='VPCID1']").val(field.VPCID1);
                        $("input[name='VPC1']").val(field.VPC1);                      
                    }else{
                        setSelectedclick('country_id',field.country_id,false);
                        $("select[name='city_id']").attr('data-value',field.pop_id);
                        $("input[name='access_addr']").val(field.access_addr);
                        $(".type").hide();
                        $(".type-company").show(); 
                        $(".type-datacenter").attr('lay-verify',"required");
                        $(".type-publcc").removeAttr('lay-verify',"required");
                    }
                    /*对端接入*/
                    setSelectedclick('endtype',field.endtype,true);
                    /*公有雲*/
                    if(field.endtype == 3){
                        setSelectedclick('endcloudid',field.endcloudid,false);
                        $("input[name='end_userid']").val(field.end_userid);
                        $("input[name='ZauthKey']").val(field.ZauthKey);
                        $("input[name='orderId2']").val(field.orderId2);
                        $("input[name='VPCID2']").val(field.VPCID2);
                        $("input[name='VPC2']").val(field.VPC2);
                    }else{ //私有雲
                        setSelectedclick('ecountry_id',field.ecountry_id,false);
                        $("input[name='eaccess_addr']").val(field.eaccess_addr);
                        $("input[name='end_network']").val(field.end_network)
                         $(".etype").hide();
                        $(".etype-company").show(); 
                        $(".etype-publcc").removeAttr('lay-verify',"required");
                        $(".etype-datacenter").attr('lay-verify',"required");
                    }
                    
                    /*设置*/
                    setNetwordData(field,{
                      popList:"{:U('pop/popList')}",
                      popItems:"{:U('pop/popItems')}",
                      getClouList:"{:U('cloud/getClouList')}",
                      getCloudCity:"{:U('cloud/getCloudCity')}",
                      getCloudItems:"{:U('cloud/getCloudItems')}",
                      form:form,
                      layer:layer,
                    });
                    $("input[name='local_network']").val(field.local_network);
                    $("input[name='end_network']").val(field.end_network)
                    $("input[name='plan_time']").val(field.plan_time);
                    $("input[name='broadband']").val(field.broadband).blur()
                    $("select[name='daylength']").find("option[value='"+field.daylength+"']").attr('selected',true);
                    $("#_create_remarks").val(field.remarks);
                    $("#price-money").html("{:lang('Configuration Cost:')}<span class='price-money'>"+field.currency+" "+field.total+" / {:lang('Month')}</span>");
                    isEdit = true;
                    form.render();
                    
                }
            })
          }
        $("body").on("click","._edit",function(){
            var _this = $(this)
            if(_this.hasClass('disabled')){
                return false;
            }
            loading = layer.load(1,{shade:[0.1,'#fff']});
            location.href=_this.attr('href');
            return false;
            
        })
        /*本端类型切换*/
        // form.on("select(_type)",function(obj){
           
        //     loading =layer.load(1, {shade: [0.1,'#fff']});
        //     $.post("{:url('ajax/getsource')}",{type:obj.value},function(res){
        //         layer.close(loading); 
        //     })
        // })
        // $("body").on("click",".mradio-group li",function(){
        //   var _this = $(this);           
        //    if(_this.find("input[type='radio']").prop('checked')){
        //       _this.find("input[type='radio']").prop('checked',false);
        //    }else{
        //      _this.find("input[type='radio']").prop('checked',true)
        //    }
        //    form.render();
        // })
    });
    
</script>
{/block}